<template>
    <div class="view" v-if="props.opsType === ARTICLE_CONSTANT.ARTICLE_OPS_TYPE.view">
        <h4>{{ articleForm.stem }}</h4>
        <div v-html="articleForm.content"></div>
    </div>

    <el-form label-width="60px" :model="articleForm" :rules="articleFormRules" ref="formRef" v-else>
        <el-form-item label="标题" prop="stem">
            <el-input v-model="articleForm.stem" type="text" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
            <QuillEditor v-model:content="articleForm.content" ref="quillRef" content-type="html" theme="snow"
                toolbar="full" placeholder="请输入文章内容" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onConfirm">确 认</el-button>
            <el-button @click="onReset">清 空</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill';
import { reactive, ref } from 'vue';
import Article from '@/api/article';
import ARTICLE_CONSTANT from '@/constant/article';
import { ElMessage } from 'element-plus';
import useLoginStore from '@/stores/login';

const articleForm = reactive({
    id: '',
    stem: '',
    content: ''
})
const articleFormRules = {
    stem: [
        { required: true, message: '文章标题不能为空', trigger: 'blur' },
        { min: '1', max: '50', message: '文章标题长度在 1 - 50 位之间', trigger: 'blur' }
    ],
    content: [
        { required: true, message: '文章内容不能为空', trigger: 'blur' },
        { min: '1', max: '10000', message: '文章在 10000 字以内', trigger: 'blur' }
    ]
}
const formRef = ref(null)
const quillRef = ref(null)
async function getArticleDetail() {
    if (!props.articleId)
        return
    const detail = await Article.getArticleDetailApi(props.articleId)
    Object.keys(articleForm).forEach(key => articleForm[key] = detail[key])
}
const props = defineProps({
    opsType: {
        type: String,
        default: ''
    },
    articleId: {
        type: String,
        default: ''
    }
})
const emit = defineEmits()
getArticleDetail()
const onConfirm = () => {
    formRef.value.validate(valid => {
        if (!valid) {
            ElMessage.error('文章标题或文章内容错误')
            return
        }
        if (props.articleId) {
            ElMessage.success('修改文章成功！')
            Article.putArticleApi(articleForm)
        } else {
            const { stem, content } = articleForm
            ElMessage.success('新增文章成功！')
            Article.postArticleApi({ name: useLoginStore().userInfo.name, stem, content })
            onReset()
        }
        emit('refresh')
        emit('onClose')
    })
}
const onReset = () => {
    formRef.value.resetFields()
    quillRef.value.setHTML('')
}
</script>

<style scoped lang="scss">
.el-form {
    .el-input {
        margin-bottom: 8px;
        height: 36px;
    }

    :deep(.ql-container) {
        width: 100vw;
        height: 400px;
        font-size: 15px;
    }

    .el-button {
        margin-top: 8px;
        border: none;
    }

    .el-button:nth-child(1):hover {
        background: var(--el-color-warn);
    }

    .el-button:nth-child(1):active {
        background: rgb(133, 20, 33);
    }

    .el-button:nth-child(2):hover {
        color: white;
        background: gray;
    }

    .el-button:nth-child(2):active {
        color: (255, 255, 255, 0.8);
        background: rgb(188, 188, 188);
    }

    .el-button:nth-child(2) {
        color: (255, 255, 255, 0.8);
        background: rgb(188, 188, 188);
    }
}
</style>